import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import clsx from 'clsx';

/**
 * ZSS Button Component
 * 
 * CSS Custom Properties:
 * --zss-border-radius: Border radius (default: 4px)
 * --zss-button-padding: Button padding (default: 8px 16px)
 * --zss-button-padding-large: Large button padding (default: 12px 20px)
 * --zss-button-padding-small: Small button padding (default: 4px 12px)
 * --zss-font-size-base: Base font size (default: 14px)
 * --zss-font-size-large: Large font size (default: 16px)
 * --zss-font-size-small: Small font size (default: 12px)
 * --zss-color-primary: Primary color (default: #409eff)
 * --zss-color-primary-light: Primary hover color (default: #66b1ff)
 * --zss-color-success: Success color (default: #67c23a)
 * --zss-color-success-light: Success hover color (default: #85ce61)
 * --zss-color-info: Info color (default: #909399)
 * --zss-color-info-light: Info hover color (default: #a6a9ad)
 * --zss-color-warning: Warning color (default: #e6a23c)
 * --zss-color-warning-light: Warning hover color (default: #ebb563)
 * --zss-color-danger: Danger color (default: #f56c6c)
 * --zss-color-danger-light: Danger hover color (default: #f78989)
 * --zss-color-white: Text color (default: #fff)
 * --zss-color-primary-bg: Text button hover background (default: #ecf5ff)
 */

@customElement('zss-button')
export class ZssButton extends LitElement {
  static styles = css`
    :host {
      display: inline-block;
    }

    .zss-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      cursor: pointer;
      border: 1px solid var(--zss-button-border-color);
      border-radius: var(--zss-button-border-radius);
      transition: all 0.2s ease;
      padding: var(--zss-button-padding-vertical) var(--zss-button-padding-horizontal);
      font-size: var(--zss-button-font-size);
      font-weight: var(--zss-button-font-weight);
      background-color: var(--zss-button-bg-color);
      color: var(--zss-button-text-color);
      outline: none;
      user-select: none;
    }

    .zss-button:hover {
      color: var(--zss-button-hover-text-color);
      border-color: var(--zss-button-hover-border-color);
      background-color: var(--zss-button-hover-bg-color);
    }

    .zss-button:active {
      color: var(--zss-button-active-text-color);
      border-color: var(--zss-button-active-border-color);
      background-color: var(--zss-button-active-bg-color);
    }

    .zss-button--primary {
      background-color: var(--zss-color-primary);
      border-color: var(--zss-color-primary);
      color: var(--zss-color-white);
    }

    .zss-button--primary:hover {
      background-color: var(--zss-color-primary-light-3);
      border-color: var(--zss-color-primary-light-3);
    }

    .zss-button--primary:active {
      background-color: var(--zss-color-primary-dark-2);
      border-color: var(--zss-color-primary-dark-2);
    }

    .zss-button--success {
      background-color: var(--zss-color-success);
      border-color: var(--zss-color-success);
      color: var(--zss-color-white);
    }

    .zss-button--success:hover {
      background-color: var(--zss-color-success-light-3);
      border-color: var(--zss-color-success-light-3);
    }

    .zss-button--success:active {
      background-color: var(--zss-color-success-dark-2);
      border-color: var(--zss-color-success-dark-2);
    }

    .zss-button--info {
      background-color: var(--zss-color-info);
      border-color: var(--zss-color-info);
      color: var(--zss-color-white);
    }

    .zss-button--info:hover {
      background-color: var(--zss-color-info-light-3);
      border-color: var(--zss-color-info-light-3);
    }

    .zss-button--info:active {
      background-color: var(--zss-color-info-dark-2);
      border-color: var(--zss-color-info-dark-2);
    }

    .zss-button--warning {
      background-color: var(--zss-color-warning);
      border-color: var(--zss-color-warning);
      color: var(--zss-color-white);
    }

    .zss-button--warning:hover {
      background-color: var(--zss-color-warning-light-3);
      border-color: var(--zss-color-warning-light-3);
    }

    .zss-button--warning:active {
      background-color: var(--zss-color-warning-dark-2);
      border-color: var(--zss-color-warning-dark-2);
    }

    .zss-button--danger {
      background-color: var(--zss-color-danger);
      border-color: var(--zss-color-danger);
      color: var(--zss-color-white);
    }

    .zss-button--danger:hover {
      background-color: var(--zss-color-danger-light-3);
      border-color: var(--zss-color-danger-light-3);
    }

    .zss-button--danger:active {
      background-color: var(--zss-color-danger-dark-2);
      border-color: var(--zss-color-danger-dark-2);
    }

    .zss-button--text {
      background-color: transparent;
      border-color: transparent;
      color: var(--zss-color-primary);
    }

    .zss-button--text:hover {
      background-color: var(--zss-color-primary-light-9);
      color: var(--zss-color-primary-light-3);
    }

    .zss-button--text:active {
      background-color: var(--zss-color-primary-light-7);
      color: var(--zss-color-primary-dark-2);
    }

    .zss-button--disabled,
    .zss-button--disabled:hover,
    .zss-button--disabled:active {
      color: var(--zss-button-disabled-text-color);
      background-color: var(--zss-button-disabled-bg-color);
      border-color: var(--zss-button-disabled-border-color);
      cursor: not-allowed;
      opacity: 0.6;
    }

    .zss-button--large {
      padding: var(--zss-button-large-padding-vertical) var(--zss-button-large-padding-horizontal);
      font-size: var(--zss-button-large-font-size);
      border-radius: var(--zss-button-large-border-radius);
    }

    .zss-button--small {
      padding: var(--zss-button-small-padding-vertical) var(--zss-button-small-padding-horizontal);
      font-size: var(--zss-button-small-font-size);
      border-radius: var(--zss-button-small-border-radius);
    }

    .zss-button--round {
      border-radius: var(--zss-button-round-border-radius);
    }

    .zss-button__icon {
      margin-right: 8px;
      font-size: 1em;
    }

    .zss-button__loading {
      margin-right: 8px;
      animation: spin 1s linear infinite;
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 2px solid transparent;
      border-top: 2px solid currentColor;
      border-radius: 50%;
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
  `;

  /**
   * 按钮类型
   */
  @property({ type: String })
  type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' = 'info';

  /**
   * 按钮大小
   */
  @property({ type: String })
  size: 'large' | 'default' | 'small' = 'default';

  /**
   * 是否禁用
   */
  @property({ type: Boolean })
  disabled = false;

  /**
   * 是否加载中
   */
  @property({ type: Boolean })
  loading = false;

  /**
   * 图标
   */
  @property({ type: String })
  icon = '';

  /**
   * 是否圆角
   */
  @property({ type: Boolean })
  round = false;

  private handleClick(e: MouseEvent) {
    if (this.disabled || this.loading) {
      e.stopPropagation();
      return;
    }
    this.dispatchEvent(new CustomEvent('click', { detail: e }));
  }

  render() {
    const classes = clsx(
      'zss-button',
      `zss-button--${this.type}`,
      `zss-button--${this.size}`,
      {
        'zss-button--disabled': this.disabled || this.loading,
        'zss-button--round': this.round
      }
    );

    return html`
      <button 
        class=${classes} 
        ?disabled=${this.disabled || this.loading}
        @click=${this.handleClick}
      >
        ${this.loading ? html`<span class="zss-button__loading">Loading...</span>` : ''}
        ${this.icon && !this.loading ? html`<i class="zss-button__icon ${this.icon}"></i>` : ''}
        <slot></slot>
      </button>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'zss-button': ZssButton;
  }
}

